<template>
    <van-nav-bar :class="tclass" :fixed="fixed" :title="title" class="myhead" @click-left="onClickLeft">
        
        <template #right v-if="carthave">
            <van-popover v-model="showPopover"  @select="changeactions" placement="bottom-end" theme="dark" trigger="click" :actions="actions">
                <template #reference>
                    <van-icon name="ellipsis" class="hicon" />
                </template>
            </van-popover>
        </template>

        <template #left v-if="back">
            <slot>
               <van-icon name="arrow-left" class="hicon" />
            </slot>
        </template>

    </van-nav-bar>
</template>

<script>
export default {
    props: {
        back: {
            type: Boolean,
            default: true // 默认为true
        }, // 二级详情页才会有返回
        carthave: {
            type: Boolean,
            default: false // 默认为true
        },
        title: String,
        fixed: {
            type: Boolean,
            default: true
        },
        tclass: String
    },
    data () {
        return {
            showPopover: false,
            actions: [
                { text: '首页', icon: 'home-o',name:"home", disabled:this.$route.name=='home' },
                { text: '客服', icon: 'chat-o' ,name:"service", disabled:this.$route.name=='service' },
                { text: '分类', icon: 'qr',name:'classify', disabled:this.$route.name=='classify' },
                { text: '购物车', icon: 'shopping-cart-o' , name: 'cart', disabled:this.$route.name=='cart' },
                { text: '我的', icon: 'user-o', name: 'mine', disabled:this.$route.name=='mine' },
            ],
        }
    },
    methods: {
        changeactions ({ name }) {
            console.log(name)
            if (name != 'logout') {
                this.$router.push({ name })
            } else {

            }
        },
        onClickLeft () {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss">

.myhead {
    z-index: 99;
}

.van-nav-bar__content {
    height: 1.1rem;
}

.van-nav-bar .van-icon-arrow-left {
    color: #1989fa !important;
    font-size: 4.267vw !important;
}

.van-nav-bar .hicon{
    font-size:20px;
}

// .van-nav-bar {
//     padding: 5px 0;
// }

// .van-icon-ellipsis:before {
//     transform: rotate(90deg);
// }

.van-nav-bar .van-icon {
    color: black;
    padding-right: 0.083333rem;
    font-size: 22px;
    font-weight: normal;
}

.van-popover__action-icon {
    padding-left: 0.213333rem;
    font-size: inherit;
}

.van-popover--dark .van-popover__content {
    z-index: 666;
    margin: 10px 1px;
    background-color: #181818;
    border-radius: 0.8vw;
}

.van-popover__action {
    padding-right: 0;
    height: auto;
    line-height: 10.667vw;
}

.van-popover__action-text {
    border-bottom: 1px solid #fff;
}

.van-popover[data-popper-placement=bottom-end] .van-popover__arrow {
    margin-top: 0.28rem;
    right: 0.053333rem;
    color: #181818;
}

</style>